<script setup lang='ts' name="personnel-organizational-add-section">
import type { FieldValues, PlusColumn } from 'plus-pro-components'

import { ElButton, ElCard } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const form = ref<FieldValues>({
    name: '',
    number: 0,
    section: 0,
})
const rules = {
    name: [
        {
            message: '请输入名称',
            required: true,
        },
    ],
    section: [
        {
            message: '请输入标签',
            required: true,
        },
    ],
}
const columns: PlusColumn[] = [
    {
        colProps: {
            span: 12,
        },
        label: '部门名称',
        prop: 'name',
        valueType: 'copy',
        width: 120,
    },
    {
        colProps: {
            span: 12,
        },
        label: '所属机构',
        options: [
            {
                color: 'red',
                label: '未解决',
                value: 0,
            },
            {
                color: 'blue',
                label: '已解决',
                value: 1,
            },
        ],
        prop: 'section',
        valueType: 'select',
        width: 120,
    },
    {
        colProps: {
            span: 12,
        },
        fieldProps: { min: 0, precision: 0, step: 1 },
        label: '排序号',
        prop: 'number',
        valueType: 'input-number',
    },
]
function handleChange(values: FieldValues) {
    console.log(values, 'change')
}
function handleSubmit(values: FieldValues) {
    console.log(values, 'Submit')
}
function handleSubmitError(err: any) {
    console.log(err, 'err')
}
function handleReset() {
    console.log('handleReset')
    form.value = { name: '', number: 0, section: 0 }
    router.push('/admin/organizational')
}
function backSectionPage() {
    // router.push('/admin/organizational')
    router.back()
}
</script>

<template>
    <div style="width: 100%;height: 100vh;">
        <ElCard style="width: 100%;height: 100%;"
                class="mb-20"
        >
            <div mb-40>
                <ElButton @click="backSectionPage">
                    返回列表
                </ElButton>
            </div>

            <PlusForm v-model="form"
                      :columns="columns"
                      :rules="rules"
                      :row-props="{ gutter: 20 }"
                      :col-props="{
                          span: 16,
                      }"
                      label-position="top"
                      footer-align="center"
                      submit-text="保存"
                      reset-text="取消"
                      @change="handleChange"
                      @submit="handleSubmit"
                      @submit-error="handleSubmitError"
                      @reset="handleReset"
            />
        </ElCard>
    </div>
</template>

<style lang="scss" scoped>
:deep(.el-button--primary) {
    margin-right: 20px;
}

:deep(.plus-form__footer) {
    flex-direction: row-reverse !important;
}
</style>
